<template>
  <div class="comment-box">
    <div class="search-bar">
      <img class="arrow" @click="goback" src="@/assets/arrow/XO.png" />
      <div class="title">走起</div>
    </div>

    <div class="comment-content">
      <div class="comment-text" v-for="c in comment[0]" :key="c.id">
        <img class="head-img" :src="c.from_user.avatar_thumbnail" />
        <div class="text-box">
          <div class="user-name">{{ c.from_user.name }}：{{ c.content }}</div>
          <div class="time">{{ date(c.timestamp) }}</div>
        </div>
      </div>
      <div class="comment-text" v-for="t in content" :key="t.time">{{ t.comment }}</div>
    </div>
    <div class="comment-box">
      <div class="comment">
        <input v-model="text" class="ipt" type="text" placeholder="添加评论" />
        <button @click="sendComment()" class="send">发送</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from '@/utils/request'
export default {
  data() {
    return {
      comment: [],
      content: [],
      text: ''
    }
  },

  props: ['id'],

  computed: {
    date: function () {
      return function (ItemTime) {
        let date = new Date().getTime()
        let time = ItemTime * 1000
        let timeInterval = date - time
        if (timeInterval > 2592000000) {
          let mouth = new Date(time).getMonth() + 1
          let day = new Date(time).getDate()
          mouth = mouth < 10 ? '0' + mouth : mouth
          day = day < 10 ? '0' + day : day
          return mouth + '-' + day
        } else if (timeInterval < 3600000) {
          let minute = parseInt(timeInterval / 60000)
          return minute + '分钟前'
        } else {
          let beforeTime = parseInt(timeInterval / 3600000)
          if (beforeTime > 24) {
            let dayTime = parseInt(beforeTime / 24)
            return dayTime + '天前'
          }
          return beforeTime + '小时前'
        }
      }
    }
  },
  created() {
    this.RequestComment()
  },
  methods: {
    async RequestComment() {
      const comment = await axios.get(`/v2/posts/${this.id}/comments`)
      this.comment.push(comment)
      console.log(comment)
    },
    sendComment() {
      if (this.text == '') {
        return
      }
      this.content.push({
        comment: this.text,
        time: new Date().getTime()
      })
      this.text = ''
    },
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.comment-box {
  .search-bar {
    padding: 10px 0;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #d94648;
    line-height: 22px;
    display: flex;
    height: 46px;
    align-items: center;
    z-index: 999;

    .arrow {
      width: 24px;
      height: 24px;
      margin-left: 20px;
    }

    .title {
      font-size: 18px;
      color: #fff;
      padding-left: 25px;
    }
  }
  .comment-content {
    padding-bottom: 52px;
    .comment-text {
      display: flex;
      width: 100%;
      height: 60px;
      align-items: center;
      border-bottom: 1px solid #ddd;
      .head-img {
        width: 30px;
        height: 30px;
        display: block;
      }
      .text-box {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        .user-name {
          color: black;
        }
        .time {
          margin-top: 10px;
        }
      }
    }
  }
  .comment-box {
    background-color: rgb(240, 240, 240);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .comment {
      display: flex;
      padding: 10px;
      .ipt {
        width: 300px;
        height: 30px;
        border: none;
        color: black;
      }
      .send {
        margin-left: 7px;
        border: none;
        background-color: rgb(240, 240, 240);
        color: red;
      }
    }
  }
}
</style>
